import ColoredText from '@/components/ColoredText';
import { mapChargeRule } from '@/utils/mapChargeRule';
import { ProCard } from '@ant-design/pro-components';
// import moment from 'moment';
import { CalcType } from '../types.d';
import type { ChargeFrameItem, ChargeRuleTableItem } from '../types.d';
import FreeTimes from './FreeTimes';

const renderCommonFrames = (chargeFrames: ChargeFrameItem[] = []) =>
  chargeFrames.map((item) => (
    <li key={item.start}>
      第{item.start}小时开始 至 第{item.end}小时结束：每{item.unit == 30 ? '半' : ''}
      小时收费&nbsp;
      <ColoredText text={(item.price / 100).toFixed(2)} /> 元；不足
      {item.unit == 30 ? '半' : '一'}小时按{item.unit == 30 ? '半' : '一'}小时计算
    </li>
  ));

const renderSectionFrames = (
  chargeFrames: ChargeFrameItem[] = [],
  freeMin: number,
  dayMax: number,
) => {
  const lastI = chargeFrames.length - 1;
  const mapedFrames = chargeFrames.map((item, index) => {
    const { start, end, unit, price } = item;
    // const tp = (end - start + 1) * (60 / unit) * price;
    // initP += tp;
    if (index == 0)
      return (
        <li key={start}>
          {freeMin}分钟 - {end}小时(含)以内: {(Math.min(price, dayMax) / 100).toFixed(2)}元;
        </li>
      );
    if (index == lastI)
      return (
        <>
          <li key={start}>
            {start}小时 - {end}小时(含): {(Math.min(price, dayMax) / 100).toFixed(2)}元;
          </li>
          {unit > 0 && <li>尾数时间不足{unit}分钟的, 尾数部分不计收费时间</li>}
        </>
      );
    return (
      <li key={start}>
        {start}小时 - {end}小时(含): {(Math.min(price, dayMax) / 100).toFixed(2)}元;
      </li>
    );
  });
  return mapedFrames;
};

export default (props: { chargeRule: ChargeRuleTableItem; flag?: boolean }) => {
  const { chargeRule, flag = false } = props;
  const { commonLarge, section = false, calcType } = chargeRule;
  const {
    freeTimes = [0, 0],
    freeMin = 0,
    dayMax = 0,
    chargeFrames = [],
  } = mapChargeRule(chargeRule);
  const dom = (
    <div style={{ display: 'flex' }}>
      <ProCard ghost title="小型车配置">
        <div>
          单次免费时长：
          <ColoredText text={freeMin} /> 分钟
        </div>
        <div>
          每日免费时段: <FreeTimes times={freeTimes} />
        </div>
        超出免费时长后:
        <ul
          style={{
            listStyleType: 'disc',
            fontFamily: 'monospace',
            color: '#444',
          }}
        >
          {section
            ? renderSectionFrames(chargeFrames, freeMin, dayMax)
            : renderCommonFrames(chargeFrames)}
        </ul>
        {calcType == CalcType.hour24 ? (
          <div style={{ color: '#666', maxWidth: '350px' }}>
            <div>
              停车时长每24小时内费用达到 <ColoredText text={(dayMax / 100).toFixed(2)} />{' '}
              元后，费用不再增加
            </div>
            每超出24小时重新开始计费
          </div>
        ) : (
          <div style={{ color: '#666', maxWidth: '350px' }}>
            单日费用(每日免费时段外的总费用)达到 <ColoredText text={(dayMax / 100).toFixed(2)} />{' '}
            元后，当日费用不再增加
          </div>
        )}
      </ProCard>
      {commonLarge && (
        <ProCard ghost title="大型车配置">
          <div>
            单次免费时长：
            <ColoredText text={commonLarge.freeMin} /> 分钟
          </div>
          <div>
            每日免费时段: <FreeTimes times={commonLarge.freeTimes} />
          </div>
          超出免费时长后:
          <ul
            style={{
              listStyleType: 'disc',
              fontFamily: 'monospace',
              color: '#444',
            }}
          >
            {section
              ? renderSectionFrames(
                  commonLarge.chargeFrames,
                  commonLarge.freeMin,
                  commonLarge.dayMax,
                )
              : renderCommonFrames(commonLarge.chargeFrames)}
          </ul>
          {calcType == CalcType.hour24 ? (
            <div style={{ color: '#666', maxWidth: '350px' }}>
              <div>
                停车时长每24小时内费用达到{' '}
                <ColoredText text={(commonLarge.dayMax / 100).toFixed(2)} /> 元后，费用不再增加
              </div>
              每超出24小时重新开始计费
            </div>
          ) : (
            <div style={{ color: '#666', maxWidth: '350px' }}>
              单日费用(每日免费时段外的总费用)达到{' '}
              <ColoredText text={(commonLarge.dayMax / 100).toFixed(2)} /> 元后，当日费用不再增加
            </div>
          )}
        </ProCard>
      )}
    </div>
  );
  return flag ? (
    dom
  ) : (
    <ProCard title={chargeRule.name} size="small">
      <div>
        <span style={{ marginRight: '15px' }}>
          时间模式：{chargeRule.calcType === CalcType.hour24 ? '24小时制' : '日期制'}
        </span>
        <span>ETC：{((chargeRule.mode || 0) & 0b01) === 1 ? '开启' : '未开启'}</span>
      </div>
      {dom}
    </ProCard>
  );
};
